<template>
  <div class="user-comment-item flex-xbt" :class="{ child: isChild }">
    <img :src="commentData.userAvatar" />
    <div class="con-wrap">
      <div class="flex-yc flex-xbt">
        <span>{{ commentData.username }}</span>
        <more-com :options="['置顶', '举报']">
          <el-icon class="a active"><MoreFilled /></el-icon>
        </more-com>
      </div>
      <p class="con" v-html="commentData.content"></p>
      <div class="comment-wrap flex-xbt">
        <div class="flex-yc">
          <span class="a">
            <i class="iconfont icon-comment fz"></i>
            {{ commentData.commentSum }}
          </span>
          <span class="a">
            <i class="iconfont icon-like"></i>
            {{ commentData.commentLikeSum }}
          </span>
        </div>
        <div class="flex-yc">
          <i class="iconfont icon-time el-icon--left"></i>
          {{ commentData.commentTime }}
        </div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import MoreCom from '@/pages/forum/components/MoreCom.vue'

type commentContent = {
  userId: number
  userAvatar: string
  username: string
  content: string
  commentSum: number
  commentLikeSum: string
  commentTime: string
}

defineProps<{
  isChild: boolean
  commentData: commentContent
}>()
</script>

<style scoped lang="scss">
.con-title {
  font-size: 16px;
  font-weight: 500;
  color: #191b1f;

  b {
    color: $primary;
  }
}

p.con {
  margin: 8px 0;
  margin-top: 15px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #191b1f;
}

.el-avatar-wrap {
  margin-top: 26px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #333;

  .el-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .username {
    padding: 0 5px;
    font-weight: 500;
  }
}

.user-comment-item {
  padding: 45px 0;

  &.child {
    padding: 0;
    padding-top: 45px;
  }

  & + .user-comment-item {
    border-top: 1px solid #d9d9d9;

    &.child {
      border-top: none;
    }
  }

  > img {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    margin-right: 15px;
    background-color: #eee;
    border-radius: 50%;
  }

  .comment-wrap {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 400;
    color: #8691a3;

    span.a {
      & + span.a {
        margin-left: 28px;
      }
    }
  }
}
</style>
